<template>
  <div class="sell">
    <!-- 组件1 Patient 患者 -->
    <Patient @majorouttable="majorouttable" />
    <div class="detailDrug">
      <!-- 组件2 Drugs 添加药品-->
      <Drugs @parentdrugopen="parentdrugopen" @resetDrug="initGetDetail" :arrdetail="arrdetail" style="width:65%;" />
      <!-- 组件3 Ranking 药品排行榜-->
      <Ranking style="width:35%;" />
    </div>
    <!-- 组件4 弹框组件 -->
    <DrugDialog v-if="show" @closeparInfo="closeparInfo" @resetdruglist="initGetDetail"></DrugDialog>

  </div>

</template>

<script>
import { export_json_to_excel } from '../../utils/Export2Excel'
import Patient from './components/Patient.vue'
import Drugs from './components/Drugs.vue'
import Ranking from './components/Ranking.vue'
import DrugDialog from './components/DrugDialog'
import { getDeDrugApi } from '../../api/detailApi'
export default {
  components: {
    Patient,
    Drugs,
    Ranking,
    DrugDialog
  },
  data() {
    return {
      show: false,//控制弹窗组件显示或者隐藏
      arrdetail: []//保存表格数据
    }
  },
  mounted() {
    this.initGetDetail()
  },
  methods: {
    //导出表格
    formatJson(filterVal,jsonData){
      return jsonData.map(v => filterVal.map(j =>{
        return v[j]
      }))
    },
    majorouttable() {
      const tHeader = ['药品编码','药品名称','药品规格','数量','单价']
      const filterVal = ['id','drugname','drugunit','drugcount','drugsinpr']
      const data = this.formatJson(filterVal,this.arrdetail)
      console.log('data',data);
      export_json_to_excel({
        header:tHeader,
        data,
        filename:'药品购买清单',
        autoWidth:true,
        bookType:'xlsx'

      })
    },
    parentdrugopen() {
      //添加第一步 打开弹窗
      this.show = true
    },
    closeparInfo() {
      this.show = false
    },
    initGetDetail() {
      getDeDrugApi().then(res => {
        console.log('res', res);
        if (res.code == 200) {
          this.arrdetail = res.data
        }
      })
    }
  },
};
</script> 

<style style="lang" scoped>
.sell {
  background-color: #fff;
  margin: 10px 0 0 0;
  border-radius: 10px;
  box-shadow: 1px 1px 6px 0px #666;
}

.detailDrug {
  display: flex;
  padding: 20px;
}
</style>